<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>打印书标</title>
    <meta name="decorator" content="default"/>
    <script src="${ctxStatic}/lodop/LodopFuncs.js" type="text/javascript"></script>
    <script type="text/javascript">
        var size = ${size}+0;
        if(size>1000){
            alertx("打印的书标数量超过1000，加载速度很慢，请重新输入起始号码",location.href="${ctx}/book/purchase/toPrintPlace");
        }
    </script>
    <style>
        .forth {
            width: 24%;
        }

        .input_ln {
            width: 100px;
        }

        .control-label {
            width: 100px !important;
        }

        .form-horizontal .controls {
            margin-left: 110px !important;
        }

        .printArea {
            position: absolute;
            top: 20px;
            left: 350px;
        }
    </style>
</head>
<body>
<br/>
<div id="purchaseForm" class="form-horizontal">
    <form id="printform">
        <input id="id" name="id" type="hidden" value="${printTemplate.id}"/>
        <div class="control-group" style="color:red;">
            共提取到书标${size}个，你可以进行<a href="javascript:createPage()" class="btn btn-primary">设计预览</a>
        </div>
        <div class="control-group forth">
            <label class="control-label">页面宽度：</label>
            <div class="controls">
                <input id="width" name="width" type="text" class="input_ln" value="210"/>mm
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">页面高度：</label>
            <div class="controls">
                <input id="height" name="height" type="text" class="input_ln" value="280"/>mm
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">标签宽度：</label>
            <div class="controls">
                <input id="itemWidth" name="itemWidth" type="text" class="input_ln" value="43"/>mm
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">标签高度：</label>
            <div class="controls">
                <input id="itemHeight" name="itemHeight" type="text" class="input_ln" value="18"/>mm
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">上边距：</label>
            <div class="controls">
                <input id="itemTop" name="itemTop" type="text" class="input_ln" value="10"/>px
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">左边距：</label>
            <div class="controls">
                <input id="itemLeft" name="itemLeft" type="text" class="input_ln" value="55"/>px
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">横向平移：</label>
            <div class="controls">
                <input id="xMove" name="xMove" type="text" class="input_ln" value="165"/>px
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">纵向平移：</label>
            <div class="controls">
                <input id="yMove" name="yMove" type="text" class="input_ln" value="127"/>px
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">每行个数：</label>

            <div class="controls">
                <input id="lineSize" name="lineSize" type="text" class="input_ln"/>
            </div>
        </div>
        <div class="control-group forth">
            <label class="control-label">每页个数：</label>

            <div class="controls">
                <input id="pageNum" name="pageNum" type="text" class="input_ln"/>
            </div>
        </div>
    </form>
    <div class="control-group">
        <a href="javascript:setPrintSet()" class="btn btn-primary">查看效果</a>
    </div>
</div>

<div class="printArea">
    <object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=1000 height=607>
        <param name="Caption" value="内嵌显示区域">
        <param name="Border" value="1">
        <param name="Color" value="#C0C0C0">
        <embed id="LODOP_EM" TYPE="application/x-print-lodop" width=1000 height=607 PLUGINSPAGE="install_lodop.exe">
    </object>
</div>

<script type="text/javascript">
    /**
     *  打印预览
     */
    var LODOP;

    // 页面宽度
    var width = ${empty printTemplate?210:printTemplate.width};
    var height = ${empty printTemplate?297:printTemplate.height};
    $("#width").val(width);
    $("#height").val(height);

    var itemWidth = ${empty printTemplate?43:printTemplate.itemWidth};
    var itemHeight = ${empty printTemplate?15:printTemplate.itemHeight};
    $("#itemWidth").val(itemWidth);
    $("#itemHeight").val(itemHeight);

    // 上边距
    var itemTop = ${empty printTemplate?0:printTemplate.itemTop};
    var itemLeft = ${empty printTemplate?40:printTemplate.itemLeft};
    $("#itemTop").val(itemTop);
    $("#itemLeft").val(itemLeft);

    // 每行多少个
    var lineSize = ${empty printTemplate?4:printTemplate.lineSize};
    $("#lineSize").val(lineSize);

    // 每页多少个
    var pageNum = ${empty printTemplate?40:printTemplate.pageNum};
    $("#pageNum").val(pageNum);

    var xMove = ${empty printTemplate?165:printTemplate.xMove};
    var yMove = ${empty printTemplate?94:printTemplate.yMove};
    $("#xMove").val(xMove);
    $("#yMove").val(yMove);

    var flag = false;

    function createPage() {
        flag = true;
        savePrintPlace();

        var size = ${size};
        var batchNum = "${batchNum}";
        var snBegin = "${snBegin}";
        var snEnd = "${snEnd}";
        var storeIds = "${storeIds}";
        LODOP = getLodop(document.getElementById('LODOP'), document.getElementById('LODOP_EM'));
        LODOP.PRINT_INIT("打印");
        LODOP.SET_PRINT_PAGESIZE(1, width + "mm", height + "mm", "A4");

        LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='${ctxStatic}/images/table1.jpg' width=100%>");
        LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW",1);

        LODOP.SET_SHOW_MODE("DESIGN_IN_BROWSE", 1);
        LODOP.SET_SHOW_MODE("SETUP_ENABLESS", "11111111000000");//隐藏关闭(叉)按钮
        LODOP.SET_SHOW_MODE("HIDE_GROUND_LOCK", true);//隐藏纸钉按钮

        $.post("${ctx}/book/purchase/searchPlace", {
            batchNum: batchNum,
            snBegin: snBegin,
            snEnd: snEnd,
            storeIds: storeIds
        }, function (result) {
            var data = result.data;
            var k = 0;
            for (var i = 0; i < data.length; i++) {
                var store = data[i];
                var bar = "<div style='font-size: 18px;text-align: center; background: none;'>" +
                        "<div style='height:21px;background: none;'>" + store.classcode + "</div>" +
                        "<div style='height:20px;background: none;'>" + store.place + "</div>" +
                        "<div style='height:12px;font-size: 12px;background: none;'>" + store.banid + "</div>" +
                        "</div>";
                // 翻页
                if (i % pageNum == 0 && i >= pageNum) {
                    k = 0;
                    LODOP.NewPage();
                }

                // 设置横移
                var x = itemLeft + xMove * (k % lineSize);
                // 设置竖移
                var y = itemTop + yMove * Math.floor((k / lineSize));
                // 打印 索书号和分类
                LODOP.ADD_PRINT_HTM(y, x, itemWidth + "mm", itemHeight + "mm", bar);
                k++;
            }
        });
        LODOP.PRINT_DESIGN();
    }

    function setPrintSet() {
        if (!flag) {
            createPage();
        }
        setPageSize();
        setItemSize();

        savePrintPlace();
    }

    function savePrintPlace() {
        var height = parseInt($("#height").val());
        var width = parseInt($("#width").val());

        var itemWidth = parseInt($("#itemWidth").val());
        var itemHeight = parseInt($("#itemHeight").val());

        var itemTop = parseInt($("#itemTop").val());
        var itemLeft = parseInt($("#itemLeft").val());

        var xMove = parseInt($("#xMove").val());
        var yMove = parseInt($("#yMove").val());

        var lineSize = parseInt($("#lineSize").val());

        var data = {
            height: height,
            width: width,
            itemWidth: itemWidth,
            itemHeight: itemHeight,
            itemTop: itemTop,
            itemLeft: itemLeft,
            xMove: xMove,
            yMove: yMove,
            lineSize: lineSize
        };

        $.post("${ctx}/book/purchase/savePrintPlace", data, function (result) {});
    }

    function setPageSize() {
        var height = parseInt($("#height").val()) + "mm";
        var width = parseInt($("#width").val()) + "mm";
        LODOP.SET_PRINT_PAGESIZE(1, width, height, "A4");
    }

    function setItemSize() {
        var itemCount = LODOP.GET_VALUE('ItemCount', 0);

        var itemWidth = $("#itemWidth").val() + "mm";
        var itemHeight = $("#itemHeight").val() + "mm";

        var itemTop = parseInt($("#itemTop").val());
        var itemLeft = parseInt($("#itemLeft").val());

        var xMove = parseInt($("#xMove").val());
        var yMove = parseInt($("#yMove").val());

        var lineSize = parseInt($("#lineSize").val());

        var k = 0;
        for (var i = 1; i <= itemCount; i++) {
            // 翻页
            if ((i - 1) % pageNum == 0 && (i - 1) >= pageNum) {
                k = 0;
                LODOP.NewPage();
            }
            LODOP.SET_PRINT_STYLEA(i, 'ItemWidth', itemWidth);
            LODOP.SET_PRINT_STYLEA(i, 'ItemHeight', itemHeight);

            var temItemLeft = itemLeft + xMove * (k % lineSize);
            var temItemTop = itemTop + yMove * Math.floor((k / lineSize));

            LODOP.SET_PRINT_STYLEA(i, 'ItemTop', temItemTop);
            LODOP.SET_PRINT_STYLEA(i, 'ItemLeft', temItemLeft);

            k++;
        }
    }
</script>
</body>
</html>